<template>
    <div class="app">
        <p>这里是App组件</p>
        <Suspense>
            <template v-slot:default><!--真正要用的组件,一定要指名，这里面的插槽是谁。v-slot:default名字不能换,放置你本应该放置的组件-->
                <Child></Child>
            </template>
            <template v-slot:fallback>
                <h3>稍等,加载中....</h3>
            </template>
        </Suspense>
    </div>
</template>

<script>
// import Child from './components/Child.vue'
import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
export default {
    name: 'App',
    components: {Child},
    setup(){}
}
</script>

<style>
.app{
    background-color: gray;
    padding: 10px;
}
</style>